<template>
    <div class="horizontal-timeline">
      <el-timeline>
        <el-timeline-item v-for="(item, index) in stepsData" :key="index">
          <!-- ,boxShadow:`0 0 5px 1px ${item.colour}` -->
          <div @click="$parent.refreshParFun(item,index,stepsData.length)" class="round" :style="{border: `1px solid ${item.colour||'#343434'}`, color: item.colour}">{{ index+1 }}</div>
          <div class="timeline-item-content">
            <p class="slrt" :style="{color: item.colour||'#343434'}">{{ item.activityName }}</p>
            <p class="slr" v-if="item.assignee">受理人：{{ item.assignee }}</p>
            <p class="timeline-item-spyj" :title="item.approvalProposal" v-if="item.approvalProposal">审批意见：{{ item.approvalProposal }}</p>
            <p class="timeline-item-date" v-if="item.startTime">开始时间：{{ item.startTime }}</p>
            <p class="timeline-item-date" v-if="item.endTime">结束时间：{{ item.endTime }}</p>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </template>
  
  <script>
  export default {
    props:{
        stepsData:{
            type:Array,
            require:true,
            default:[]
        }
    },
    data() {
      return {
      };
    },
    methods:{
      refresh(v,index,len){
        this.$parent.refreshParFun(v,index,len)
      }
    }
  };
  </script>
  <style lang="scss" scoped>
  >>>.slrt{
    width: 100%;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
    font-weight: bold;color: #040000;height: 20px;
  }
  >>>.timeline-item-spyj{
    width: 100%;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
    color: #1f2f3d;font-size: 12px;
  }
  >>>.slr{
    width: 100%;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
    color: #1f2f3d;font-size: 12px;
    font-weight: bold;
  }
  >>>.el-timeline-item__node--normal {
    left: -1px;
    width: 32px;
    height: 32px;
    border: 2px solid #dfe4ed;
    background: #fff;
    top: -24px;
    display: none;
}
>>>.round{
  cursor: pointer;
  left: -1px;
  width: 22px;
  height: 22px;
  background: #fff;
  top: -24px;
  border-radius: 100%;
  display: inline-block;
  position: absolute;
  text-align: center;
  line-height:22px;
  font-weight: bold;
  font-size: 12px;
}
  >>>.el-timeline{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .el-timeline-item{
        width:12%;
    }
  }
  >>>.el-timeline-item__tail {
    position: absolute;
    left: 4px;
    height: 4px;
    border-top: 2px solid #dfe4ed;
    width:215px;
    top:-17px;
}
  >>>.el-timeline-item__wrapper {
    position: relative;
    padding-left:0;
    top: -3px;
}
  .horizontal-timeline .el-timeline-item {
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
  }
  
  .horizontal-timeline .timeline-item-content {
    text-align: left;
  }
  .horizontal-timeline .timeline-item-date {
    font-size:10px;
    color: #999999;
  }
  </style>
  
  